<html>  
  <head>  
        <meta charset="utf-8">  
        <title>7.1.3 子元素</title>  
  </head> 
  <style>
  </style>
<body>

<script src="../../d3/d3.min.js" charset="utf-8"></script> 
<script>  

var width  = 500;	//SVG绘制区域的宽度
var height = 500;	//SVG绘制区域的高度
	
var svg = d3.select("body")			//选择<body>
			.append("svg")			//在<body>中添加<svg>
			.attr("width", width)	//设定<svg>的宽度属性
			.attr("height", height);//设定<svg>的高度属性
			
var dataset = [100, 100, 100];		

var g = svg.append("g");

var rect = g.selectAll("rect")
				.data(dataset)
				.enter()
				.append("rect")
				.attr("fill","steelblue")
				.attr("id",function(d,i){ return "rect" + i; })
				.attr("x",10)
				.attr("y",function(d,i){ return 10 + i * 35; })
				.attr("width",function(d,i){ return d; })
				.attr("height",30);
			
g.transition()
	.selectAll("rect")
	.filter(function(d,i){ return i >= 1; })
	.attr("width",300);
					


</script> 

</body>
</html>